import './App6.css';
import { Input, Space, Table, Popconfirm } from 'antd';
import axios from 'axios'
import { useEffect, useState } from 'react';
const { Search } = Input;


function App() {
    const [dataSource, setDataSource] = useState([])  //使用useState创建dataSource数组，以便于修改它的状态，初始值为一个空数组
    // 接收用户信息
    useEffect(() => {
        axios.get('http://localhost:3001/data')//使用Ajax请求，接收一个promise对象
            .then(response => {                //response表示拿到的db.json中完整对象数据
                const data = response.data  //将对象中的data属性赋值给data变量
                setDataSource(data)         //改变dataSource数组的状态为data
            })
    }, [])  //加空数组为第二个参数，表示只执行一次以上操作，也就是页面一开始加载的那一次
    const onDelete = key => {
        //使用数组中的filter方法，找到不要删除的数据，并以数组的形式返回
        const newData = dataSource.filter(item => item.key !== key);
        setDataSource(newData);//更新dataSource的状态为不需删除的数组
    };
    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: 'key',
            dataIndex: 'key',
            key: 'key'
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '操作',
            dataIndex: 'do',
            key: 'do',
            render: (_, record) => ( //record表示要删除行的数据，_表示不被用到的参数
                <Space size="middle">
                    <Popconfirm title="确认删除？"
                        onConfirm={() => onDelete(record.key)}//给onConfirm属性添加onDelete的回调函数，当点击删除按钮后才会执行
                    //不能写成onConfirm={onDelete(record.key)}  这样会使得组件渲染时就触发删除   事件属性绑定函数引用，而非函数执行结果
                    >
                        <a href="#">删除</a>
                    </Popconfirm>
                </Space>
            )
        }
    ];
    const onSearch = (value, _e, _info) => {
        axios.get('http://localhost:3001/data')//使用Ajax请求，接收一个promise对象
            .then(response => {                //response表示拿到的db.json中完整对象数据
                const data = response.data;
                if (value) {
                    const filteredData = data.filter(item =>//使用数组中的filter方法，找到与输入框内数据相同的数据，并以数组的形式返回
                        value === item.id ||
                        value === String(item.key) ||
                        value === item.name ||
                        value === item.age ||
                        value === item.address
                    );
                    setDataSource(filteredData); //改变当前dataSource数组的状态为查找后的结果数组
                }
                else {
                    setDataSource([]); //如果输入框未输入值，则改变当前dataSource数组的状态为空
                }
            });
    }


    return (
        <div className="container">
            <div className="search-box">
                <Search
                    placeholder='请输入关键词'
                    enterButton="搜索"
                    size="large"
                    allowClear
                    onSearch={onSearch}

                />
            </div>
            <Table
                dataSource={dataSource}
                columns={columns}
                pagination={false}
            />
        </div>
    )
}
export default App;